<template>
    <div class="app-page">
        <!--导航S-->
        <Menu mode="horizontal" :active-name="activeName" ref="activeName" @on-select="openPage">
            <MenuItem name="-2">
                <Icon type="ios-paper"/>
                列表
            </MenuItem>
            <MenuItem name="-1">
                <Icon type="ios-add-circle"/>
                {{ openPageTile }}
            </MenuItem>
        </Menu>
        <!--导航E-->

        <!--列表S-->
        <div class="app-mt20">
            <Row>
                <Col span="3">
                    <Select>
                        <Option></Option>
                    </Select>
                </Col>
                <Col span="6" style="margin:0 10px;">
                    <Input clearable placeholder="输入关键字搜索"/>
                </Col>
                <Col span="2">
                    <Button class="search-btn" type="primary">
                        <Icon type="search"/>
                        搜索
                    </Button>
                </Col>
            </Row>
            <Row class="app-table">
                <Table border ref="selection" :columns="columns4" :data="data1"></Table>
            </Row>
            <Page show-total :total="totalCount" :page-size="pageSize" @on-change="changePage"  style="text-align: right"></Page>
        </div>
        <!--列表S-->

        <!--表单 S-->
        <Modal v-model="formModel" :mask-closable="false" :title="openPageTile" @on-ok="edit(true)"  @on-cancel="edit(false)">
            <Form ref="dataModel" :model="dataModel" :rules="rules" :label-width="80">
                <FormItem label="标题" prop="title">
                    <Input v-model="dataModel.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="所属类别">
                    <Select>
                        <Option  v-for="(item,index) in dataModel.type" :key="index" value="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="缩略图"  prop="thumb">
                    <Upload name="thumb" v-model="dataModel.thumb" action="//jsonplaceholder.typicode.com/posts/">
                        <Button icon="ios-cloud-upload-outline">上传缩略图</Button>
                    </Upload>
                </FormItem>
                <FormItem label="状态">
                    <i-switch size="large"  :value="true">
                        <span slot="open">正常</span>
                        <span slot="close" >到期</span>
                    </i-switch>
                </FormItem>
                <FormItem label="投放时间">
                    <DatePicker type="datetimerange"  placeholder="请选择时间" style="width: 100%"></DatePicker>
                </FormItem>
                <FormItem label="备注" prop="comment">
                    <Input type="textarea" v-model="dataModel.comment" placeholder="请输入备注" :disabled="dataModel.name === 'admin'"></Input>
                </FormItem>
            </Form>
        </Modal>
        <!--表单 E-->

        <!--操作提示 S-->
        <Modal width="300" v-model="destroyModal">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>角色删除确认</span>
            </p>
            <div style="text-align:center; font-size:14px">
                <p>角色：{{ destroyData ? destroyData.name : '-'}}</p>
                <p>将被删除且无法恢复，是否继续？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long @click="destroy(true)">删除</Button>
            </div>
        </Modal>
        <!--操作提示 E-->
    </div>
</template>
<script>
    export default {
        name: "index",
        data() {
            return {
                dataModel: {},
                totalCount: 0,
                destroyData: null,
                currentPage: 1,
                tableData: [],
                pageSize: 10,
                activeName:'-2',
                openPageTile:'新增',
                formModel:false,
                destroyModal: false,
                rules: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '标题不能少于6位', trigger: 'blur' }
                    ],
                    thumb:[
                        { required: true, message: '缩略图不能为空', trigger: 'blur' }
                    ]
                },
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '缩略图',
                        key: 'thumb'
                    },
                    {
                        title: '所属类别',
                        key: 'type'
                    },
                    {
                        title: '投放时间',
                        key: 'market_time',
                        width: 300,
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            return h('div', [
                                h('i-switch', {
                                        props: {
                                            size: 'large'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.delete(params.index)
                                            }
                                        }
                                    },
                                    [h('span', {
                                        slot: "open",
                                        domProps: {
                                            innerHTML: '正常'
                                        }
                                    }),
                                        h('span', {
                                            slot: "close",
                                            domProps: {
                                                innerHTML: '到期'
                                            }
                                        }),
                                    ]
                                )
                            ])
                        }
                    }, {
                        title: '操作',
                        key: 'active',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.openPage(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showDestroy(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }

                ],
                data1: [
                    {
                        title: '天猫打折促销',
                        thumb: 18,
                        type: 1,
                        market_time: '2019-08-09 12:03:05 2019-10-03  12:03:05',
                        status: 0
                    }
                ]
            }
        },
        methods: {
            //打开页面(判断是新增还是编辑)
            openPage(name) {
                if(name >= -1){
                    this.activeName = '-1';
                    this.formModel = true;
                    if(name >= 0){
                        this.openPageTile="编辑"
                    }else{
                        this.openPageTile="新增"
                    }
                }else{
                    this.formModel = false;
                }
            },
            //编辑保存
            edit(result) {
                if (result) {
                    this.$refs['dataModel'].validate((valid) => {
                        if (valid) {
                            const dataId = this.dataModel.id;
                            if (dataId) { // 编辑
                                this.$http.put(`admin/roles/${dataId}`, {
                                    name: this.dataModel.name || undefined,
                                    comment: this.dataModel.comment || undefined
                                }).then(() => {
                                    this.$Message.success('编辑成功!');
                                    this.refresh();
                                });
                            } else { // 新增
                                this.$http.post('admin/roles', {
                                    name: this.dataModel.name || undefined,
                                    comment: this.dataModel.comment || undefined
                                }).then(() => {
                                    this.$Message.success('新增成功!')
                                    this.refresh();
                                });
                            }
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    });
                } else {
                    //关闭弹框操作
                    this.$refs['dataModel'].resetFields();
                    this.$nextTick(()=>{
                        this.activeName = '-2'
                        this.openPageTile="新增"
                        this.$refs.activeName.updateActiveName()
                    })
                }
            },
            //显示删除提示
            showDestroy(index) {
                this.destroyModal = true;
            },
            //删除事件
            destroy(result){
                if (result && this.destroyData) {
                    alert(1)
                }
                this.destroyModal = false;
            },
            //获取分页
            changePage(page) {
                this.currentPage = page;
            },
            //刷新
            refresh() {
                if (this.currentPage) {
                    this.changePage(this.currentPage);
                }
            },
        },
        mounted(){

        }
    }
</script>
